<template>
    <!-- 专户 -->
  <div class="budgetFohf-box">
    <el-row :gutter="20" type="flex">
      <el-col :span="8">
        <NewCard :isright="true" title="专户代码">
            <el-table :data="serviceList" highlight-current-row @row-click="rowClick">
                <el-table-column prop="accountStr" label="专户代码"></el-table-column>
                <el-table-column prop="balance" label="专户余额">
                    <template slot-scope="scope">
                        <p>{{ (scope.row.balance || 0)| sumFilters }}</p>
                    </template>
                </el-table-column>
            </el-table>
        </NewCard>
      </el-col>
      <el-col :span="16">
        <NewCard :isright="true" title="赋值">
            <!-- 赋值和列表 -->
            <div class="assign-box" v-if="selectItem.id">
                <p class="assign-info">当前选择的专户代码：<span>{{selectItem.accountStr}}</span>，专户余额：<span>{{selectItem.balance | sumFilters}}</span></p>
                <el-form ref="form" :inline="true" :model="selectItem" label-width="80px" label-position="left">
                    <el-form-item label="赋值金额">
                        <el-input v-model.number="selectItem.amount" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" round class="addBtn" @click="saveBtn" v-hasPermi="['tool:budgetService:addBalance']">确认</el-button>
                        <el-button round @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>

                <!-- 列表 -->
                <el-table :data="assignList">
                    <el-table-column label="专户代码">
                        <template slot-scope="scope">
                            <p>{{selectItem.accountStr}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="info" label="摘要"></el-table-column>
                    <el-table-column prop="transactionAmount" label="交易金额">
                        <template slot-scope="scope">
                            <p>{{ (scope.row.transactionAmount || 0)| sumFilters }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="balance" label="专户余额">
                        <template slot-scope="scope">
                            <p>{{ (scope.row.balance || 0)| sumFilters }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="交易时间" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="card" label="对方账号" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <p>{{scope.row.card || '--'}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="toUserName" label="对方户名" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <p>{{scope.row.toUserName || '--'}}</p>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        @size-change="assignSizeChange"
                        @current-change="assignCurrentChange"
                        :current-page="assignPageing.pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="assignPageing.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="assignPageing.total">
                    </el-pagination>
                </div>
            </div>

            <!-- 没有选择的时候 -->
            <div class="noData-box" v-else>
                <img src="~@/assets/images/wjg_img@2x.png" alt="" />
                <p>选择阿米巴专户</p>
            </div>
        </NewCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import {getbudgetServicelistAccountApi,addBalanceBudgetServiceApi,getBudgetTradeListApi} from "@/wss/newApi_3-24/tool/budget.js"
export default {
    name: 'budgetFohf',
    components:{NewCard},
    data(){
        return{
            // 分页参数
            pageing: { pageNum: 1, pageSize: 10, total: 0 },
            serviceList: [],//专户列表
            selectItem: {},// 选择的一项

            // 赋值记录分页
            assignPageing: { pageNum: 1, pageSize: 10, total: 0 },
            assignList:[],//当前选择的专户赋值记录列表
        }
    },
    mounted(){
        this.getbudgetServiceList() // 获取阿米巴专户列表
    },
    methods:{
        // 获取阿米巴专户列表
        async getbudgetServiceList(){
            let result = await getbudgetServicelistAccountApi()
            if(result.code==200){
                this.serviceList = result.rows
            }
        },

        // 选择一项
        rowClick(row){
            this.selectItem = row
            this.getBudgetTradeList() // 获取当前选择的这一项的赋值列表
        },

        // 点击重置按钮
        reset(){
            this.selectItem.amount=''
        },

        // 点击赋值确定按钮
        saveBtn(){
            if(!this.selectItem.amount || this.selectItem.amount==''){
                this.$message({message: '请输入赋值金额',type: 'warning'});
                return
            }
            this.addBalanceBudgetService() // 增加预算专户的余额
        },

        // 增加预算专户的余额
        async addBalanceBudgetService(){
            let data = {
                serviceId: this.selectItem.id,
                amount: this.selectItem.amount
            }
            let result = await addBalanceBudgetServiceApi(data)
            console.log(result);
            if(result.code==200){
                this.getbudgetServiceList() // 获取阿米巴专户列表
                this.getBudgetTradeList() // 获取当前选择的这一项的赋值列表
                this.selectItem.amount = ''
                this.$message({message: '赋值成功',type: 'success'});
            }
        },

        // 获取当前选择的这一项的赋值列表
        async getBudgetTradeList(){
            let serviceId = this.selectItem.id
            let {pageNum, pageSize} = this.assignPageing
            let result = await getBudgetTradeListApi({serviceId, pageNum, pageSize})
            if(result.code==200){
                this.assignList = result.rows
                this.assignPageing.total = result.total
            }
        },

        // -----------赋值列表分页-----------
        assignSizeChange(val) {
            this.assignPageing.pageSize = val
            this.getBudgetTradeList() // 获取当前选择的这一项的赋值列表
        },
        assignCurrentChange(val) {
            this.assignPageing.pageNum = val
            this.getBudgetTradeList() // 获取当前选择的这一项的赋值列表
        }
        // -----------赋值列表分页-----------end

    }
}
</script>

<style lang="scss" scoped>
p{
    margin: 0;
    padding: 0;
}
.budgetFohf-box{
    height: 100%;
    .el-row{
        height: 100%;
    }
    ::v-deep .el-card__body{
        height: 100%;
        padding-bottom: 0;
        >div{
            height: calc(100% - 45px);
            overflow-y: auto;
            &::-webkit-scrollbar{
                width: 0;
            }
        }
    }

    // 分页
    .pagination{
        text-align: center;
        margin: 10px 0;
    }
}

// 赋值表单和列表
.assign-box{
    margin-top: 10px;
    .assign-info{
        font-size: 14px;
        font-weight: 400;
        color: #999;
        line-height: 30px;
        margin-bottom: 10px;
        span{
            color: #2e3f5e;
            font-weight: bold;
        }
    }
    .addBtn{
        background-color: #f87a23;
        border-color: #f87a23;
    }
    .el-form {
        border-bottom: 1px solid #eee;
    }
    p{
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow:ellipsis;
    }
}

// 表格样式
::v-deep .el-table .cell {
  font-size: 13px;
  color: #333333;
}
::v-deep .el-table th > .cell {
  font-weight: normal;
  color: #909aaa;
}
::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: #fff;
}

// 无数据
.noData-box {
  text-align: center;
  margin: 50px 0;
}
.noData-box img {
  width: 30%;
}
.noData-box > p {
  font-size: 12px;
  font-weight: 400;
  color: #858a91;
  margin-top: 30px;
}
</style>